<template>
	<view>
		<view class="tabbar-box">
			<image src="/static/login/login_bottom_bg.png" mode="widthFix" class="botttom_bg"></image>
			<view class="tabbar_item" :class="{tabbar_on:id == current}" v-for="item,id in tabBar.list" :key="id"
				@tap="go_page(id)">
				<image :src="'/'+item.iconPath" v-if="id!= current" mode="widthFix" class="tabbar_img"></image>
				<image :src="'/'+item.selectedIconPath" v-else mode="widthFix" class="tabbar_img"></image>
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbarqn",
		data() {
			return {
				tabBar: {
					color: "#004956",
					selectedColor: "#F8D78B",
					backgroundColor: "#002026",
					list: [{
							pagePath: "pages/index/index",
							text: "首页",
							iconPath: "static/tabbar/tabbar_1.png",
							selectedIconPath: "static/tabbar/tabbar_1_on.png"
						},
						{
							pagePath: "pages/mart/mart",
							text: "市场",
							iconPath: "static/tabbar/tabbar_2.png",
							selectedIconPath: "static/tabbar/tabbar_2_on.png"
						},
						{

							pagePath: "pages/collection/collection",
							text: "版权",
							iconPath: "static/tabbar/tabbar_3.png",
							selectedIconPath: "static/tabbar/tabbar_3_on.png"
						},
						{
							pagePath: "pages/user/user",
							text: "我的",
							iconPath: "static/tabbar/tabbar_4.png",
							selectedIconPath: "static/tabbar/tabbar_4_on.png"
						}
					]
				}
			};
		},
		props: {
			current: {
				type: Number,
				default: 0
			},

		},
		mounted: function() {
			// uni.hideTabBar()
			console.log(1)
		},

		methods: {
			go_page: function(id) {
				let url = this.tabBar.list[id].pagePath;
				console.log(url)
				uni.switchTab({
					url: '/' + url
				})
			},

		}
	}
</script>

<style>
	.tabbar_img {
		width: 87rpx;
		height: 87rpx;
		margin-bottom: 10rpx;
	}

	.tabbar_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: 400;
		color: #B9B9B9;
		line-height: 40rpx;
		position: relative;
	}

	.tabbar_on {
		color: #F2D7AA;
	}

	.botttom_bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.tabbar-box {
		width: 100%;
		padding: 40rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		z-index: 998;
		height: 230rpx;
		bottom: 0;
	}
</style>
